<template>
  <view-box ref="viewBox" body-padding-bottom="5px" style="background: #f2f2f2">
    <card v-if="data">
      <div slot="content" class="card-padding">
        <div class="douucc">
            <p class="title">{{data.title}}</p>
            <p style="margin-right:10px;margin-bottom:10px;">
                <button class="button-postoo-foll" v-if="data.is_follow !== 0">
                  <i slot="icon" class="icon-shoucang2 iconfont"></i> 已收藏
                </button>
                <button @click="shouc()" class="button-postoo" v-if="data.is_follow === 0">
                  <i slot="icon" class="icon-shoucang2 iconfont"></i> 收藏
                </button>
            </p>
        </div>
        <div class="content" v-html="data.body"></div>
      </div>
    </card>
  </view-box>
</template>
<script>
  import { ViewBox, Card } from 'vux'
  export default {
    data () {
      return {
        data: null,
        post: 0
      }
    },
    components: {
      ViewBox,
      Card
    },
    created () {
      this.post = parseInt(this.$route.params.post)
      this._getData()
    },
    methods: {
      shouc () {
        this.$http.post('/shoucang/store', {
          news_id: this.post
        }).then(response => {
          this.$vux.toast.show({
            text: '收藏成功',
            type: 'text'
          })
          this._getData()
          console.log(response)
        }).catch(error => {
          console.log(error)
        })
      },
      _getData () {
        this.$http.get('/posts/' + this.post).then((response) => {
          this.$vux.loading.hide()
          this.data = response.data
        }).catch((error) => {
          this.$vux.loading.hide()
          console.log(error)
        })
      }
    }
  }
</script>
<style scoped>
  .title {
    text-align: center;
    padding-bottom: 10px;
    font-size: 20px;
  }
  .content {
    color: #999;
  }
  .card-padding {
    padding: 15px;
  }
  .douucc{
      width: 100%;
  }
  .button-postoo{
    width: 80px;
    height: 35px;
    background: #8AB0B4;
    border:1px solid #8AB0B4;
    color: #fff;
    border-radius: 16px;
  }
.button-postoo-foll{
  width: 80px;
  height: 35px;
  background: #bababa;
  border:1px solid #bababa;
  color: #fff;
  border-radius: 16px;
}
</style>